import React, { Component } from 'react';

import {
  StyleSheet, Dimensions, TouchableOpacity, View,
} from 'react-native';
import { Thumbnail } from 'native-base';

const deviceWidth = Dimensions.get('window').width;

export default class FormShowPhoto extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { datas, showBigImage } = this.props;
    return (
      <View style={styles.container}>
        {datas && datas.length > 0 && (
          datas.map((data, index) => (
            <TouchableOpacity
              key={index}
              onPress={showBigImage}
              style={styles.imageContent}
            >
              <Thumbnail
                // eslint-disable-next-line react/no-array-index-key
                square
                source={data}
                style={styles.image}
              />
            </TouchableOpacity>

          ))
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    margin: 5,
  },
  imageContent: {
    width: '32%',
    marginBottom: 5,
    marginRight: '1.33%',
  },
  image: {
    width: '100%',
    height: (deviceWidth - 16) / 3,
  },
});
